<%
    def columns = tableDefine.columns
    def varDomainName = tableNameUtil.lowerCaseFirst(tableDefine.id)
    def urlPrefix = PubUtils.addStrBeforeSeparator(PubUtils.packageToPath(config.category), ".") + varDomainName
%>
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form ref="form" :form="formSearch" style="padding:10px;" layout="inline">
            <%
                List<String> list = tableModel.getSearchKeyList();
                def listSize = list.size()
                int i = 0;
                list.each {
                    if (i % 4 == 0) {
                        println """       <a-row :gutter="24">"""
                    }
                    def column = tableDefine.getColumnByColumnName(it);
            %>
                <a-col :span="6">
                    <a-form-item label="${column.cnname}">
                        <a-input v-model="formSearch.${column.dataName}" placeholder="请输入 ${column.cnname}" @keyup.enter.native="loadData" />
                    </a-form-item>
                </a-col>
            <%
                    i++;
                    if(i%4 == 0){
                        println "       </a-row>"
                    }
                }

                if(i%4 == 0 ){
                   %>
                <a-row>
                    <a-col :offset="20" :span="4">
                        <a-button type="primary" icon="search" :loading="loading" @click="loadData">
                            Search
                        </a-button>
                    </a-col>
                </a-row>
                    <%
                } else{
                    %>
                    <a-col :span="6" style="padding-left:10px;">
                        <a-button type="primary" icon="search" :loading="loading" @click="loadData">
                            Search
                        </a-button>
                    </a-col>
                    <%
                        println "       </a-row>"
                }
            %>



            </a-form>
        </div>
        <div style="padding:10px;">
            <add ref="addModal" :show-button="false" @refreshList="loadData()" />
            <edit ref="editModal"  @refreshList="loadData()" />
            <a-button type="primary" icon="plus-circle" :loading="loading" @click="showAdd">新增 ${tableDefine.cnname}</a-button>
            <a-button type="danger" icon="minus-circle" :loading="loading" @click="handleDelete">删除</a-button>
        </div>

        <a-table
                bordered
                ref="multipleTable"
                :rowKey="record => record.id"
                :columns="columns"
                :rowSelection="rowSelection"
                :dataSource="queryResult.dataList"
                :pagination="queryResult.pagination"
                :loading="loading"
                @change="handleTableChange"
        >

        </a-table>


    </div>
</template>

<script>
    import add from './add.vue'
    import edit from './edit.vue'
    var _ = require('underscore')

    let formSearchSample = {
<%
  list.eachWithIndex{ it,index ->
      def column=tableDefine.getColumnByColumnName(it);
      String dataName = column.dataName
      String value = tableNameUtil.genTestDataQuote(column,dictMap)
      print """\t\t'${dataName}': ${value}"""
      if(index < list.size()-1){
        println ","
      }else{
        println ""
      }
  }
%>
    }


    const columns = [<%
            columns.each{
              def column=it
              if(tableModel.isNotInList('queryList',column.columnName)){
                return
              }
            %>
            {
                title: '${column.cnname}',
                dataIndex: '${column.dataName}',
                key: '${column.dataName}',
                width: 100
            },
            <%
                }
            %>
        ]

    export default {
        components: {
            add,
            edit
        },
        data() {
            return {
                loading: false,
                columns,
                selectedRowKeys: [],
                selectedRows: [],
                rowSelection: {
                    fixed: true,
                    onChange: this.onSelectChange
                },
                formSearch: _.clone(formSearchSample),
                queryResult: {
                    dataList: [],
                    pagination: {
                        total: 0,
                        current: 1,
                        pageSize: 20
                    }
                }
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData: function() {
                const _this = this
                _this.loading = true
                const promise = new Promise(function(resolve, reject) {
                    // remote ajax request ,need implement
                    setTimeout(function() {
                        _this.loading = false

                        const remoteData = {
                            success: true,
                            value: [_.clone(formSearchSample)],
                            pageQuery: {
                                total: 0,
                                current: 1,
                                pageSize: 20
                            }
                        }
                        resolve(remoteData)
                    }, 1000)
                })
                promise.then(function(data) {
                    console.log(data)
                    _this.queryResult.dataList = data.value
                    _this.queryResult.pageQuery = data.pageQuery
                }).catch(function() {
                    this.\$Message.error('查询失败！')
                })
            },
            handleTableChange: function(pagination) {
                this.loadData()
            },
            handleCurrentChange(current) {
                this.queryResult.pagination.current = current
                this.loadData()
            },
            handleDelete () {
                const selection = this.selectedRows
                if (selection.length === 0) {
                    this.\$message.warning('请至少选择一行记录！')
                    return
                }
                if (selection.length > 1) {
                    this.\$message.warning('删除操作只能选择一条！')
                    return
                }
                const _this = this
                this.\$confirm({
                    title: '确认删除',
                    content: '您确认要删除所选数据吗？',
                    onOk() {
                        _this.doDelete(selection)
                    },
                    onCancel() {}
                });
            },
            doDelete(selection){
                const _this = this
                _this.loading = true
                const promise = new Promise(function (resolve, reject) {
                    // remote ajax request ,need implement
                    setTimeout(function () {
                        console.log(selection)
                        _this.loading = false
                        resolve({ 'success': true })
                    }, 1000)
                })
                promise.then(function (data) {
                    this.\$message.success('删除成功！')
                    _this.handleCurrentChange(1)
                }).catch(function () {
                    this.\$message.error('删除失败！')
                })
            },
            showAdd() {
                this.\$refs.addModal.show(true)
            },
            editItem(item) {
                this.\$refs.editModal.editItem(item)
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            }
        }
    }
</script>
